<template>
  <div>
    <a-card title="记账查询">
      <a-form :model="queryParams" layout="inline">
        <a-form-item label="名称">
          <a-input v-model:value="queryParams.name" />
        </a-form-item>
        <a-form-item label="类型">
          <a-select v-model:value="queryParams.type" style="width: 80px">
            <a-select-option value="income">收入</a-select-option>
            <a-select-option value="expense">支出</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="科目">
          <accounting-subject-selection
            :accountingType="queryParams.type"
            @accountingSubjectSelected="subjectSelected"
          />
        </a-form-item>
        <a-form-item>
          <a-button type="primary" html-type="submit" @click="query">查询</a-button>
        </a-form-item>
        <a-form-item>
          <a-button @click="reset">重置</a-button>
        </a-form-item>
      </a-form>
    </a-card>
    <a-divider style="border-color: #7cb305" dashed />
    <a-card title="查询结果">
      <a-table
        :columns="columns"
        :data-source="journalEntryDataSet"
        rowKey="uid"
        :pagination="paginationConfig"
        :rowClassName="(record, index) => (index % 2 === 1 ? 'table-striped' : null)"
        :scroll="{ y: 240 }"
      >
        <template #type="{ record }">
          <span v-if="record.accountingSubject.type?.toUpperCase() == 'INCOME'">收入</span>
          <span v-else>支出</span>
        </template>
      </a-table>
    </a-card>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from 'vue'
import { useHttpRequest } from '@/api/chunfeng/apiRequest'


import { useAccountingApi } from '@/api/chunfeng/accounting'
import { JournalEntryData, QueryJournalEntryData } from '@/api/chunfeng/accounting/interfaces'
import AccountingSubjectSelection from '@/components/chunfeng/accounting-subject/AccountingSubjectSelection.vue'
import {Form} from "ant-design-vue";

export default defineComponent({
  name: 'JournalEntryList',
  components: { AccountingSubjectSelection },
  // components: {
  //   Card,
  //   Form
  // },
  setup() {
    const { executeQueryRequest } = useHttpRequest()

    const { queryJournalEntry } = useAccountingApi()
    const journalEntryDataSet = ref(Array<JournalEntryData>())

    const paginationConfig = reactive({
      showSizeChanger: true,
    })

    const queryParams = reactive<QueryJournalEntryData>({
      name: undefined,
      type: undefined,
      accountingSubjectId: undefined,
      occurredStart: undefined,
      occurredEnd: undefined,
    })

    const { resetFields } = Form.useForm(queryParams, {})
    const columns = [
      {
        title: '名称',
        dataIndex: 'name',
        key: 'name',
      },

      {
        title: '类型',
        dataIndex: 'accountingSubject.type',
        key: 'type',
        slots: { customRender: 'type' },
      },
      {
        title: '科目',
        dataIndex: 'accountingSubject.name',
        key: 'accountingSubject-name',
      },
      {
        title: '金额（元）',
        dataIndex: 'amount',
        key: 'amount',
      },
      {
        title: '发生日期',
        dataIndex: 'occurredAt',
        key: 'occurredAt',
      },
      {
        title: '操作',
        key: 'action',
        slots: { customRender: 'action' },
      },
    ]

    function reset() {
      resetFields()
    }

    function query() {
      journalEntryDataSet.value.length = 0
      executeQueryRequest(queryJournalEntry(queryParams), (results: JournalEntryData[]) => {
        journalEntryDataSet.value.push(...results)
      })
    }

    function subjectSelected(subjectId: string) {
      queryParams.accountingSubjectId = subjectId
    }

    return {
      queryParams,
      columns,
      query,
      paginationConfig,
      reset,
      journalEntryDataSet,
      subjectSelected,
    }
  },
})
</script>
<style scoped>
.ant-table-striped :deep(.table-striped) {
  background-color: #fafafa;
}
</style>
